<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="z" uri="zz"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>${nowColumn.title1}</title>
<%@include file="/views/common/common.jsp"%>
<style type="text/css">
html {
  height: 100%;
  overflow: hidden;
}

h1 {
  text-align: center;
}

.scene {
  width: 45%;
  height: 100%;
  margin: 1% 1% 1% 50%;
  perspective: 1000px;
}

.book {
  position: relative;
  width: 80%;
  height: 96%;
  transform-style: preserve-3d;
}

.page {
  cursor: pointer;
  position: absolute;
  color: black;
  width: 100%;
  height: 100%;
  transition: 1.5s transform;
  transform-style: preserve-3d;  
  transform-origin: left center;
}
.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  backface-visibility: hidden;
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#FFFFFF), to(#CCCCCC));
  background: linear-gradient(to bottom right, #fff, #ccc);
}
.back {
  transform: rotateY(180deg);
}

.page.active {
  z-index: 1;
}
.page.flipped {
  transform: rotateY(-180deg);
}
.page.flipped:last-of-type {
  z-index: 1;
}
p {
  margin: 0 0 0.1em;
  text-indent: 1em;
}
.qr {
  margin: 50px auto;
  max-width: 50%;
}
.qr img {
  display: block;
}


/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  .scene {
    width: 90%;
    height: 90%;
    margin: 5%;
}
</style>

</head>
<c:if test="${nowColumn.img==''}">
	<body style="background: black;margin: 0;width: 100%;height: 100%;">
</c:if>
<c:if test="${nowColumn.img!=''}">
	<body style="background:url(${nowColumn.img}) no-repeat left top;background-size:100%;margin: 0;width: 100%;height: 100%;">
</c:if>
	<div class="scene">
	  <article class="book">
	  	<c:forEach items="${nowColumn.cms_column_detail_list}" var="fj" varStatus="status">
	  	
	  		<c:if test="${status.index%2==0}">
		  		<c:if test="${status.index==0}">
		  			<section class="page active">
		  		</c:if>
		  		<c:if test="${status.index!=0}">
		  			<section class="page">
		  		</c:if>
	  		</c:if>
	  		
	  		<c:if test="${status.index%2==1}">
				<div class="back">
					<img src="${fj.img}" width="100%" height="100%"/>
				</div>
	  		</c:if>
	  		<c:if test="${status.index%2==0}">
				<div class="front">
					<img src="${fj.img}" width="100%" height="100%"/>
				</div>
	  		</c:if>
	  		
	  		<c:if test="${status.index%2==1}">
				</section>
	  		</c:if>
	  			
	  	</c:forEach>
	</article>
	</div>
	<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src='js/jquery.hammer.min.js' type="text/javascript"></script>
	<script>
		var currentPage = 0;
		$('.book')
		.on('click', '.active', nextPage)
		.on('click', '.flipped', prevPage);
		$('.book').hammer().on("swipeleft", nextPage);
		$('.book').hammer().on("swiperight", prevPage);
		function prevPage() {
		  $('.flipped')
		    .last()
		    .removeClass('flipped')
		    .addClass('active')
		    .siblings('.page')
		    .removeClass('active');
		}
		function nextPage() {
		  $('.active')
		    .removeClass('active')
		    .addClass('flipped')
		    .next('.page')
		    .addClass('active')
		    .siblings();
		}
	</script>
</body>
</html>